<template>
  <div>
    <!-- 头部 -->
    <userTitel :title="title"></userTitel>
    <!-- 第一行卡片 -->
    <el-row>
      <!-- 左边 -->
      <el-col :span="12">
        <el-card
          shadow="never"
          style="width: 950px; margin-left: 10px; height: 203px"
        >
          <div class="block">
            <!-- 左 1-1 -->
            <div class="demonstration">
              <h4 class="litTitel">机构概述</h4>
              <p class="p">地址 :</p>
              <p>负责人 :</p>
              <el-button size="medium" type="danger" plain
                >查看营业部分布</el-button
              >
            </div>
            <!-- 左 1-2 -->
            <div class="isSpan">
              <div class="one">分拣中心(个)</div>
              <div class="one">营业部(个)</div>
              <div class="two">司机个数(个)</div>
              <div class="two">快递员人数(个)</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <!-- 右边 -->
      <el-col :span="12">
        <el-card
          shadow="never"
          style="width: 678px; margin-left: 150px; height: 192px"
        >
          <div class="header">
            <h4>今日数据</h4>
            <div>
              <img
                style="width: 15px; height: 15px; margin-right: 5px"
                src=""
                alt=""
              />
              2023-02-21 15:48
            </div>
          </div>
          <div class="oneMain">
            <div class="main">
              <div style="margin-left: -18px">订单金额</div>
              <div style="font-size: 12px">
                较昨日 -
                <img
                  style="width: 20px; height: 20px; margin-bottom: -3px"
                  src=""
                  alt=""
                />
              </div>
            </div>
            <div class="main">
              <div style="margin-left: -18px">订单数量</div>
              <div style="font-size: 12px">
                较昨日 -
                <img
                  style="width: 20px; height: 20px; margin-bottom: -3px"
                  src=""
                  alt=""
                />
              </div>
            </div>
            <div class="main">
              <div style="margin-left: -18px">运输任务</div>
              <div style="font-size: 12px">
                较昨日 -
                <img
                  style="width: 20px; height: 20px; margin-bottom: -3px"
                  src=""
                  alt=""
                />
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <!-- 第二行卡片 -->
    <el-row style="margin-top: 20px">
      <!-- 左边 -->
      <el-col :span="12">
        <el-card
          shadow="never"
          style="width: 950px; margin-left: 10px; height: 290px"
        >
          <div class="header">
            <h4>
              待办任务
              <img
                style="width: 20px; height: 20px; margin-bottom: -3px"
                src=""
                alt=""
              />
            </h4>
            <div style="margin-left: 510px">
              <img
                style="width: 15px; height: 15px; margin-right: 5px"
                src=""
                alt=""
              />
              2023-02-21 15:48 - 2023-02-21 15:48
            </div>
          </div>
          <div class="oneMain" style="margin-top: 150px">
            <div class="main">
              <h4 style="margin-left: -18px">
                待取件 <span style="color: #e25539">0</span>
              </h4>
            </div>
            <div class="main">
              <h4 style="margin-left: -18px">
                待派件 <span style="color: #ffc257">0</span>
              </h4>
            </div>
            <div class="main">
              <h4 style="margin-left: -18px">
                未分配运输 <span style="color: #ff9739">0</span>
              </h4>
            </div>
            <div class="main">
              <h4 style="margin-left: -18px">
                超时运输 <span style="color: #dfcb59">0</span>
              </h4>
            </div>
          </div>
        </el-card>
      </el-col>
      <!-- 右边 -->
      <el-col :span="12">
        <el-card
          shadow="never"
          style="width: 678px; margin-left: 150px; height: 290px"
        >
          <div class="headerTwo">
            <h4>
              执行中任务
              <img
                style="width: 20px; height: 20px; margin-bottom: -4px"
                src=""
                alt=""
              />
            </h4>
          </div>
          <div class="oneMain" style="margin-top: 150px">
            <div class="main">
              <h4 style="margin-left: -18px">
                运输中 <span style="color: #e25539">0</span>
              </h4>
            </div>
            <div class="main">
              <h4 style="margin-left: -18px">
                派件中 <span style="color: #ffc257">0</span>
              </h4>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <!-- 第三行卡片 -->
    <el-row style="background: pink; margin-top: 20px; height: 190px">
      <el-col :span="24">123456</el-col>
    </el-row>
    <!-- 第四行卡片 -->
    <el-row style="background: pink; margin-top: 20px; height: 484px">
      <el-col :span="12">123456</el-col>
      <el-col :span="12">123456</el-col>
    </el-row>
    <!-- 第五行卡片 -->
    <el-row style="background: pink; margin-top: 20px; height: 549px">
      <el-col :span="12">123456</el-col>
      <el-col :span="12">123456</el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "dashboardIndex",
  data() {
    return {
      title: "工作台",
    };
  },

  created() {},

  methods: {},
};
</script>

<style scoped lang="scss">
.headerTwo {
  display: flex;
  position: absolute;
  top: -50px;
  height: 50px;
  // background-color: pink;
  h4 {
    flex: 1;
    margin-top: 5px;
  }
  div {
    margin-top: 5px;
    margin-left: 400px;
  }
}
.header {
  display: flex;
  position: absolute;
  top: -50px;
  height: 50px;
  // background-color: pink;
  h4 {
    flex: 1;
    margin-top: 5px;
  }
  div {
    margin-top: 5px;
    margin-left: 425px;
  }
}
.oneMain {
  display: flex;
  .main {
    flex: 1;
    width: 100px;
    margin-top: -10px;
    // background-color: pink;
    div {
      height: 50px;
      // span {
      //   position: absolute;
      //   width: 20px;
      //   height: 20px;
      //   background-image: url();
      //   background-repeat: no-repeat;
      // }
    }
  }
}
.block {
  display: flex;
  .demonstration {
    flex: 1;
    border-right: 1px solid #f0f2f7;
    // position: absolute;
    // display: flex;
    // flex-wrap: wrap;
    .litTitel {
      margin-left: -390px;
      position: relative;
      top: -90px;
      border-color: pink;
    }
    .p {
      // color: #a29798;
      position: relative;
      top: -220px;
      left: -7px;
      margin-left: -390px;
    }
    p {
      font-size: 12px;
      color: #a29798;
      position: relative;
      top: -230px;
      height: 20px;
      border-color: pink;
      margin-left: -390px;
    }
    .el-button {
      position: relative;
      top: -210px;
      left: -148px;
    }
  }
  .isSpan {
    width: 458px;
    flex: 1;
    display: flex;
    flex-flow: row wrap;
    .one {
      position: relative;
      top: -30px;
      width: 220px;
      height: 100px;
      // background-color: aqua;
    }
    .two {
      position: relative;
      top: -160px;
      width: 220px;
      height: 100px;
      // background-color: aqua;
    }
  }
}
</style>
